import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import queryString from 'query-string'
import { routerRedux } from 'dva/router'
import { config } from 'utils'
import { ListMenuType } from 'utils/enums'

import { List, Page } from 'components'
import Filter from './Filter'

const Report = ({ location, dispatch, loading, report }) => {
  location.query = queryString.parse(location.search)
  const { list, pagination } = report
  const { pageSize } = pagination
  const listProp = {
    dataSource: list,
    loading: loading.effects['report/query'],
    menuType: ListMenuType.MENU_DETAIL + ListMenuType.MENU_DELETE + ListMenuType.MENU_XML,
    pagination,
    location,
    columnsData: [
      {
        title: 'reference',
        dataIndex: 'reference',
        key: 'reference',
      },
      {
        title: 'reportCode',
        dataIndex: 'reportCode',
        key: 'reportCode',
      },
      {
        title: 'transactionCount',
        dataIndex: 'transactionCount',
        key: 'transactionCount',
      }, {
        title: 'createTime',
        dataIndex: 'createTime',
        key: 'createTime',
      }, {
        title: 'submissionDate',
        dataIndex: 'submissionDate',
        key: 'submissionDate',
      }, {
        title: 'updateTime',
        dataIndex: 'updateTime',
        key: 'updateTime',
      },
    ],
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
    onClikDetail (item) {
      dispatch(routerRedux.push({
        pathname: `/report/${item.id}`,
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'report/delete',
        payload: { id },
      })
    },
    onClickXML (record) {
      dispatch({
        type: 'report/generateXML',
        payload: { id: record.id },
      })
    },
  }
  const filterProp = {
    filter: {
      ...location.query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        search: queryString.stringify({
          ...value,
          page: 1,
          pageSize,
        }),
      }))
    },
    onAdd () {
      dispatch(routerRedux.push({
        pathname: `/report/${config.ADDFLAG}`,
      }))
    },
  }
  return (
    <Page>
      <Filter {...filterProp} />
      <List {...listProp} />
    </Page>
  )
}


Report.propTypes = {
  report: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}


export default connect(({ loading, report }) => ({ loading, report }))(Report)
